<style scoped>
#redact {
	height: 100vh;
	background-color: white;
	box-sizing: border-box;
	padding: 80px 15px 0 15px;
}

.redact-head {
	height: 150px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

.my-img {
	width: 85px;
	height: 85px;
	border-radius: 50%;
}

.redact-conter {
	background-color: white;
	border-radius: 8px;
	padding: 5px 20px;
	box-sizing: border-box;
}

.card-list {
	display: flex;
	padding: 18px 0 11px 0;
}

.left {
	font-size: 15px;
	width: 28%;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.right {
	font-size: 14px;
	width: 72%;
}

.border-b {
	height: 1px;
	background-image: linear-gradient(to right, #FFFFFF, #D7D7D7, #FFFFFF);
}

.time-box {
	padding: 6px 0;
}

.time-title {
	padding-bottom: 6px;
}

.redact-btn {
	width: 85%;
	margin: 33px auto 0 auto;
	padding: 10px;
	font-size: 18px;
	border-radius: 30px;
	text-align: center;
	letter-spacing: 3px;
	color: white;
	background-color: #50AEF6;
}
</style>
<style>
#redact .my-img .van-uploader {
	overflow: hidden;
	border-radius: 50%;
	width: 86px;
	height: 86px;
}

#redact .my-img .van-uploader__upload {
	margin: 0 !important;
}

#redact .redact-conter input {
	border: none;
}

#redact .redact-conter .van-radio-group {
	display: flex;
}

#redact .redact-conter .van-radio-group .van-radio {
	margin-right: 10px;
}
</style>
<template>
	<top-bar title="个人信息" :notBack="false" />
	<div id="redact">
		<div class="redact-head">
			<van-uploader action="https://s.yoyo51.net/index.php/index/Index/doHeadimg" name="avatar"
				:before-read="beforeRead" :after-read="afterRead">
				<img class="my-img" :src="userData.headimgurl" v-if="userData.headimgurl" />
				<img class="my-img" src="../../img/user.png" alt="" v-else />
			</van-uploader>
			
			<!-- <uploader type="img" url="https://s.yoyo51.net/index.php/index/Index/doHeadimg" @uploaded="(res) => $set(userData,userData.headimgurl, res)">>
				<img class="my-img" :src="userData.headimgurl" />
				<button class="upload-button" type="button">
					<img class="my-img" src="../../img/user.png" alt="" />
				</button>
			</uploader> -->
		</div>
		<div class="redact-conter">
			<div class="card-list">
				<div class="left">昵称</div>
				<div class="right">
					<input v-model="nickname" @input="inputChange" :placeholder="userData.nickname" />
				</div>
			</div>
			<div class="border-b" />
			<div class="card-list">
				<div class="left">性别</div>
				<div class="right">
					<van-radio-group v-model="sex">
						<van-radio name="1" icon-size="20px" checked-color="#50AEF6"> 男 </van-radio>
						<van-radio name="2" icon-size="20px" checked-color="#50AEF6"> 女 </van-radio>
					</van-radio-group>
				</div>
			</div>
			<div class="border-b" />
			<div class="card-list">
				<div class="left">生日</div>
				<div class="right" @click="dataPopup = true">
					{{ single }}
				</div>
				<!-- <el-input placeholder="Please input" /> -->
			</div>
			<div class="border-b" />
			<div class="card-list">
				<div class="left">联系电话</div>
				<div class="right">
					<input type="number" v-model="userData.mobile_phone" placeholder="请输入联系电话" />
				</div>
			</div>
		</div>
		<div class="redact-btn" @click="keep()">保存</div>
	</div>
	<van-action-sheet v-model:show="dataPopup" style="height: 40%">
		<!-- <van-date-picker v-model="currentDate" @confirm="confirm()" @cancel="cancel()" /> -->
		<van-date-picker :value="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate" @confirm="confirm()"
			@cancel="cancel()" />
	</van-action-sheet>
	<!-- 自定义底部栏 -->
	<!-- <bottom-bar :active="1" /> -->
</template>
<script setup>
// 导入自定义组件
import topBar from "@/components/topBar.vue"; //顶部导航栏
import Uploader from "@/components/uploader.vue";
// import bottomBar from "@/components/bottomBar.vue"; //底部导航
// 图片
</script>
<script>
// var currentDate = vant.ref(['2021', '01', '01'])
export default {
	data: () => ({
		dataPopup: false,
		userData: "", //用户数据
		avatarUrl: "", //头像
		nickname: "", //昵称
		single: "2002-10-10", //生日
		currentDate: "2002-10-10", //选中日期
		sex: "1", //性别
		minDate: new Date(1980, 0, 1),
		maxDate: new Date(2100, 10, 1),
	}),
	created() {
		this.userData = JSON.parse(sessionStorage.userData);
		// this.currentDate = ref(['2021', '01', '01'])
		// this.storeId = this.urlData.store_id;
	},
	mounted() { },
	methods: {
		uploadFile() {
			// 获取文件input元素
			var fileInput = document.getElementById('myFile');

			// 获取文件对象
			var file = fileInput.files[0];

			// 创建FormData对象
			var formData = new FormData();
			formData.append('file', file);

			// 发送POST请求上传文件
			axios.post('/upload', formData)
				.then((response) => {
					console.log(response.data);
					alert('文件上传成功！');
				})
				.catch((error) => {
					console.error(error);
					alert('文件上传失败！');
				});
		},





		// 选择头像
		afterRead(files) {
			// axios
			// 	.post("/index.php/index/Index/doHeadimg",new FormData()
			// 	)
			// 	.then(({ data }) => {
			// 		console.log(console.log(data, '上传'));
			// 		// if (data.code == 0) {

			// 		// }
			// 	});
			console.log(files, 'eeee');
		},
		inputChange() { },
		// 日期确定
		confirm(e) {

			console.log(this.currentDate, 'ee');
		},
		// 日期取消
		cancel() { },
		// 保存
		keep() {
			this.$router.go(-1);
		},
	},
};
</script>
